<template>
  <el-card>
    <BreadCrumb />
    <el-form ref="FormRef" :model="form" :rules="FormRules" label-width="120px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="form.roleName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色权限">
        <el-tree
          ref="tree"
          :data="rightList"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          accordion
        />
      </el-form-item>
      <el-form-item class="form_button">
        <el-button type="primary" @click="addRole()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import { isConfirm } from '@/utils/confirm'
import { addRole } from '@/api/roleApi'
import { getRightList } from '@/api/rightApi'
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      // 角色表单数据
      form: {
        // 角色名称
        roleName: '',
        // 角色权限
        roleRightIds: ''
      },
      // 角色表单验证规则
      FormRules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      },
      rightList: [],
      // 树形控件配置
      defaultProps: {
        children: 'children',
        label: 'rightName'
      }
    }
  },
  created() {
    // 获取权限列表数据
    this.getRightList()
  },
  methods: {
    // 获取权限列表数据
    async getRightList() {
      const { data: res } = await getRightList()
      this.rightList = res.NestedList
    },
    // 添加权限
    addRole() {
      // 表单预校验
      this.$refs.FormRef.validate(async valid => {
        if (!valid) return
        // 添加确认
        if (await isConfirm('是否添加该角色？')) {
          // 获取树形控件选择的数据
          this.getRightIds()
          // 发送请求进行添加
          await addRole(this.form)
          this.$message.success('添加成功')
          // 重置表单
          this.form = {}
          // 清空树形控件选中的数据
          this.$refs.tree.setCheckedNodes([])
        }
      })
    },
    // 处理树形控件选中的数据，使之变成由权限 id 构成的字符串
    getRightIds() {
      const selectNodes = this.$refs.tree.getCheckedNodes()
      // 数据处理，将全选的剔除掉子权限
      selectNodes.forEach(item1 => {
        if (item1.children.length > 0) {
          // 说明该选项已经全选
          // 这时候在遍历他的 children，剔除 selectNodes 中与 children id 相同的元素
          item1.children.forEach(item2 => {
            // 考虑三级情况
            item2.children.forEach(item3 => {
              selectNodes.splice(selectNodes.indexOf(item3), 1)
            })
            selectNodes.splice(selectNodes.indexOf(item2), 1)
          })
        }
      })
      const rightIdList = []
      // 数据处理，只获取 selectNodes 中的 id
      selectNodes.forEach(item => {
        rightIdList.push(item.id)
      })
      if (rightIdList.length > 0) this.form.roleRightIds = rightIdList.join(',')
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 400px;
}
.el-form-item {
  margin: 0 0 50px -30px;
}
.el-tree /deep/ .el-tree-node__content{
  height: 40px;
}
.el-tree /deep/ .el-tree-node__label{
  font-size: 16px;
}
</style>
